<template>
  <el-form ref="formRef" :model="form" v-loading="loading">
    <pub-edit-description :ndColumns="2">
      <pub-edit-description-item :span="1" label="上级地区">
        {{ form.pidName }}
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="地区编码" required>
        <el-form-item prop="id" :rules="$formRules.input">
          <pub-input v-model="form.id"></pub-input>
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="地区名称" required>
        <el-form-item prop="name" :rules="$formRules.input">
          <pub-input v-model="form.name"></pub-input>
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="查找码" required>
        <el-form-item prop="lookup" :rules="$formRules.input">
          <pub-input v-model="form.lookup"></pub-input>
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="区划等级" required>
        <!-- <el-form-item prop="level" :rules="$formRules.select">
          <pub-select-dict
            v-model="form.level"
            :disabled="true"
            dict-code="AREALEVEL"
            placeholder="请选择"
            width="100%"
          />
        </el-form-item> -->
        {{ formatDictCode('QHDJ', form.level) }}
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="人口数（万）" required>
        <el-form-item prop="totalNum" :rules="$formRules.input">
          <pub-input-number v-model="form.totalNum" />
        </el-form-item>
      </pub-edit-description-item>

      <pub-edit-description-item :span="2" label="经纬度">
        <div class="w-full h-350px">
          <positionSelect v-model:formValue="form" />
        </div>
      </pub-edit-description-item>
      <pub-edit-description-item :span="2" label="备注">
        <el-form-item prop="remark">
          <pub-textarea v-model="form.remark" />
        </el-form-item>
      </pub-edit-description-item>
    </pub-edit-description>
  </el-form>

  <div class="dialog-footer-btn">
    <el-button type="default" @click="emit('cancel')">取消</el-button>
    <el-button type="primary" @click="submit" v-prevent-repeat-click>
      保存
    </el-button>
  </div>
</template>
<script setup>
import { get_area_detail, add_area } from '@/api/system'
import { formatDictCode } from '@/utils/index'
const emit = defineEmits(['cancel', 'success'])
const props = defineProps({
  dialogId: {
    type: String,
    default: ''
  }
})
const form = ref({})
const loading = ref(false)
const formRef = ref(null)
const submit = async () => {
  formRef.value.validate(async valid => {
    if (valid) {
      loading.value = true
      console.log(form.value)
      let res = await add_area(form.value)
      if (res.succeed) {
        emit('success', props.dialogId)
      }
      loading.value = false
    }
  })
}
const getDetail = async () => {
  loading.value = true
  let { data } = await get_area_detail(props.dialogId) 
  loading.value = false
  form.value.pidName = data.name
  form.value.level = data.level + 1
  form.value.operateType = 0
  form.value.pid = data.id
 
}
onMounted(() => {
  if (props.dialogId) {
    getDetail()
  }
})
</script>
<style lang="scss" scoped>
/* 弹窗提交时loading样式需占满整个弹窗 */
.el-loading-parent--relative {
  position: inherit !important;
}
</style>
